
<link rel="stylesheet" type="text/css" href="/static/manage/css/member/cloud/service/style.css?v={$version}"/>
<div class="bw-container">
    <div class="box">
        <div class="top-box">
            <div class="tops-box">
                <div class="top-box-left">
                    <div class="blue-box"></div>
                    <div class="top-title">服务市场</div>
                    <div class="top-img">
                        <img src="/static/manage/images/member/cloud/service/icon.png">
                    </div>
                </div>
                <div class="gray">
                    <div class="gray-box">
                        <blockquote class="layui-elem-quote layui-text" style="border-left: 5px solid #01AAED;">
                            云市场服务需要购买套餐,拥有剩余使用次数才可使用
                            <br>使用一次服务,扣除次数1
                            <br>无剩余次数会导致服务调用失败,余额不足时请提前购买套餐
                        </blockquote>
                    </div>
                </div>
            </div>

            <div id="service_list" class="layui-row layui-col-space30">

            </div>
        </div>
    </div>

</div>
<script id="service_template" type="text/html">


    {{#  layui.each(d, function(index, item){ }}
    <div class="list layui-col-lg4 layui-col-md6 layui-col-sm12">
        <div class="list-box">
            <div class="list-content">
                <div class="list-left">
                    <img src="/static/manage/images/member/cloud/service/{{item.file_name}}-icon.png"/>
                </div>
                <div class="list-right">
                    <div class="list-right-box">
                        <div class="list-r-h">
                            <div class="list-r-text">
                                {{item.name}}
                            </div>
                        </div>
                    </div>
                    <div class="list-r-text1">简介：{{item.name}}</div>
                    <div class="btn-box">
                        <div class="list-money">
                            <p>
                                <span class="span1">总次数 : {{item.total}}次</span><span class="span2">剩余次数 : {{item.amount}}次</span>
                            </p>
                        </div>
                        <div class="list-btn">
                            <div class="list-l-btn detail" data-service-id="{{item.id}}"  data-service-name="{{item.name}}">购买套餐</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{#  }); }}

    {{#  if(d.length === 0){ }}
    <div class="layui-col-md12">
        <div><i class="layui-icon layui-icon-close-fill"></i><span class="null-sty">&nbsp&nbsp您当前没有能管理的插件...</span></div>
    </div>
    {{#  } }}

</script>
<script>
    var service_id = 0;
</script>
<script>
    var element, layer, form, table, bwajax, $;

    layui.use(['element', 'layer', 'form', 'table', 'bwajax'], function () {
        element = layui.element;
        layer = layui.layer;
        form = layui.form;
        table = layui.table;
        bwajax = layui.bwajax.instance();
        $ = layui.jquery;

        //执行列表
        table.render({
            elem: '#list',
            url: "{:Url('/manage/member/cloud/service/index')}",
            response: {
                statusCode: 200,  //规定成功的状态码，默认：0
            },
            parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.data.total, //解析数据长度
                    "data": res.data.data.list //解析数据列表
                };
            },
            toolbar: '#listToolbar',
            cols: [[
                {type: 'checkbox', fixed: 'left'},
                {field: 'id', title: '序号', align: 'center', width: 80, fixed: 'left'},
                {field: 'name', title: '名称', align: 'center', minWidth: 150, templet: '#name'},
                // {field: 'file_name', title: '文件名', align: 'center', minWidth: 150, templet: '#file_name'},
                // {field: 'params', title: '参数', align: 'center', minWidth: 150, templet: '#params'},
                // {field: 'create_time', title: 'create_time', align: 'center', width: 160, templet: '#create_time'},
                // {field: 'update_time', title: 'update_time', align: 'center', width: 160, templet: '#update_time'},
                {field: 'amount', title: '剩余次数', align: 'center', width: 150},
                {field: 'total', title: '总次数', align: 'center', width: 150},

                {title: '操作', toolbar: '#listBar', align: 'center', fixed: "right", minWidth: 140}
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 10,
            // page: true
        });

        //监听表格头部工具栏事件
        table.on('toolbar(listFilter)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'refresh':
                    reload();
                    break;
            }
        });

        //监听工具条
        table.on('tool(listFilter)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

            switch (layEvent) {
                case 'packet':
                    bwOpenIframe("{:Url('/manage/member/cloud/packet/index')}?service_id=" + data.id, '【' + data.name + '】套餐', '500px', '500px');
                    break;
                case 'walletBill':
                    bwOpenIframe("{:Url('/manage/member/cloud/walletBill/index')}?service_id=" + data.id, '【' + data.name + '】记录', '700px', '500px');
                    break;
                case 'order':
                    bwOpenIframe("{:Url('/manage/member/cloud/order/index')}?service_id=" + data.id, '【' + data.name + '】订单', '600px', '500px');
                    break;

            }
        });

        form.on('submit(searchBtn)', function (data) {
            reload(1);

            return false;
        })


    });
</script>